<template>
  <div>
      <div>
      <div class="echartsBox">
        <!-- 内存使用率折线图 -->
        <Echarts
          :data="OptionData"
          style="height: 450px; margin-top: 30px"
          v-loading="loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          element-loading-text="数据加载中"
        ></Echarts>
      </div>

      <div class="dataBox">
          <div class="dataBox_item">
            <span class="item_name">Free:</span>
            <span class="item_num">{{MEM.free}}</span>
          </div>
          <div>
            <span class="item_name">Used:</span>
            <span class="item_num">{{MEM.used}}</span>
          </div>
          <div>
            <span class="item_name">BuffCache:</span>
            <span class="item_num">{{MEM.buffCache}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from '@/components/ECharts/ECharts.vue'
import {mapState} from 'vuex'
import Decimal from "decimal.js";
export default {
  data(){
    return {
       //websocket
      socket: null,
      //定时器
      jishiqi: null,
      //折现图是否运行的标志
      isStart: true,
      //加载中
      loading: true,
      //x轴数据
      xData: [],
      //y轴数据
      yData: [],
      //内存使用率折线图数据
      OptionData: {
        title: {
          text: "内存使用率",
        },
        xAxis: {
          type: "category",
          data: [],
          //紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          //缩放:脱离0值比例
          scale: true,
        },
        series: [
          {
            data: [],
            type: "line",
            //使折线变得平滑
            smooth: true,
            areaStyle: {
              color: "#3FB1E3",
            },
          },
        ],
        tooltip: {
          //tip中的内容
          formatter: function (arg) {
            // let argData = arg.data.toFixed(5);

            // argData = argData + "%";
            var num =new Decimal(arg.data).mul(new Decimal(100)).toFixed(3) + "%";

            return "CPU已使用:" + num;
          },
        },
      },
      }
      
    },
  components:{
    Echarts
  },
  computed:{
    ...mapState(['sessionId','MEM'])

  },
  created(){
  },
  mounted(){
    if(!this.sessionId){
      setTimeout(()=>{
        this.sendMessage()
      },100)
    }else{
      this.sendMessage()
    }

    this.jishiqi = setInterval(()=>{
      this.getData()
      this.getTimeData()
    },1000)
    
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  beforeDestroy(){
    this.$http({
      method:'delete',
      url:'/resource/mem',
      params:{
        sessionId:this.sessionId
      }
    })
    .then(res=>{
      console.log(res)
    })

    clearInterval(this.jishiqi)
  },
  methods:{
    //发送get请求，获取数据
    sendMessage(){
      // var Id = this.sessionId
      console.log(this.sessionId);
      // var ID = parseInt(this.sessionId)
      this.$http({
        method:"get",
        url:'/resource/mem',
        params:{
          sessionId:this.sessionId
        }
      })
      
    },
    //数据渲染到echarts上
    getData(){
      if (this.yData.length >= 10) {
        this.yData.splice(0, 1);
        this.yData.push(this.MEM.used / this.MEM.total);
      } else {
        this.yData.push(this.MEM.used / this.MEM.total);
      }
      this.OptionData.xAxis.data = this.xData;
      this.OptionData.series[0].data = this.yData;
    },
    //获取时间渲染到echarts
    getTimeData() {
      if (this.xData.length >= 10) {
        this.xData.splice(0, 1);
        this.xData.push(this.$moment().format("HH:mm:ss"));
      } else {
        this.xData.push(this.$moment().format("HH:mm:ss"));
      }
    },
  }
}
</script>


<style scoped lang="less">
.dataBox{
  display: flex;
  justify-content: space-around;
    .item_name{
      color: #32325d;
      font-size: 15px;
      font-weight: 800;
      margin-right: 10px;
    }
    .item_num{
      font-weight: 400;
      font-size:15px;
    }
}
</style>